<template>
  <div class="">
    <el-card style="width: 100%; margin: 0 auto">
      <el-tabs
        style="display: flex; min-height: 100%"
        type="border-card"
        tab-position="left"
      >
        <el-tab-pane>
          <span slot="label"><i class="el-icon-person"></i> 个人信息</span>
          <PersonMessage />
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-xinxixiugai"></i> 信息修改</span>
          <div style="margin-left: 10%">
            <el-form
              ref="personForm"
              :rules="personRules"
              :model="personForm"
              label-width="80px"
            >
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8090/file/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img
                  v-if="personForm.avatarUrl"
                  :src="personForm.avatarUrl"
                  alt=""
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-form-item label="名字" prop="name">
                <el-col :span="8">
                  <el-input v-model="personForm.name"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="年龄" prop="age">
                <el-col :span="8">
                  <el-input v-model="personForm.age"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="personForm.sex">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="电话" prop="phone">
                <el-col :span="8">
                  <el-input v-model="personForm.phone"></el-input>
                </el-col>
              </el-form-item>
            </el-form>
            <span style="margin-left: 33%">
              <el-button type="primary" @click="handlePersonChange"
                >提 交</el-button
              >
            </span>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-password"></i> 修改密码</span>
          <Password />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import PersonMessage from '@/components/PersonMessage.vue'
import Password from '@/components/Password.vue'

export default {
  name: 'ManagePerson',
  components: {
    PersonMessage,
    Password
  },
  data() {
    let checkAge = (rule, value, callback) => {
      if (value > 150) {
        callback(new Error('年龄输入过大'))
      } else {
        callback()
      }
    }
    return {
      user: JSON.parse(localStorage.getItem('curUser')) || {},
      personForm: {
        id: (JSON.parse(localStorage.getItem('curUser')) || {}).id,
        avatarUrl: (JSON.parse(localStorage.getItem('curUser')) || {})
          .avatarUrl,
        name: (JSON.parse(localStorage.getItem('curUser')) || {}).name,
        age: (JSON.parse(localStorage.getItem('curUser')) || {}).age + '',
        phone: (JSON.parse(localStorage.getItem('curUser')) || {}).phone,
        sex: (JSON.parse(localStorage.getItem('curUser')) || {}).sex
      },
      personRules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { min: 1, max: 3, message: '长度在 1 到 3 个位', trigger: 'blur' },
          {
            pattern: /^([1-9][0-9]*){1,3}$/,
            message: '年龄必须为正整数字',
            trigger: 'blur'
          },
          { validator: checkAge, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handlePersonChange() {
      this.$refs.personForm.validate(valid => {
        if (valid) {
          this.$http.post('/user/update', this.personForm).then(res1 => {
            console.log(res1)
            if (res1.code == 200) {
              this.$message.success('修改个人信息成功！')
              this.personDialogVisible = false

              this.$http.get('/user/findByNo?no=' + this.user.no).then(res2 => {
                if (res2.code === 200) {
                  localStorage.setItem('curUser', JSON.stringify(res2.data[0]))
                  this.$router.go(0)
                } else {
                  this.$message.error('更新个人信息失败！')
                }
              })
            } else {
              this.$message.error('修改个人信息失败！')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleAvatarSuccess(res) {
      // res 就是文件的路径
      this.personForm.avatarUrl = res
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs--left .el-tabs__header.is-left,
::v-deep .el-tabs--left .el-tabs__header.is-right,
::v-deep .el-tabs--left .el-tabs__nav-scroll,
::v-deep .el-tabs--left .el-tabs__nav-wrap.is-left,
::v-deep .el-tabs--left .el-tabs__nav-wrap.is-right,
::v-deep -tabs--right .el-tabs__header.is-left,
::v-deep -tabs--right .el-tabs__header.is-right,
::v-deep -tabs--right .el-tabs__nav-scroll,
::v-deep -tabs--right .el-tabs__nav-wrap.is-left,
::v-deep -tabs--right .el-tabs__nav-wrap.is-right {
  height: auto;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  flex: 1;
}
::v-deep .avatar-uploader {
  padding-left: 10%;
  margin-bottom: 10px;

  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-upload:hover {
    border-color: #409eff;
  }

  img {
    width: 138px;
    height: 138px;
    display: block;
  }
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>
